<template>
  <div class="course-content">
    <van-form>
      <van-field v-model="age" label="年龄" type="number" required></van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="gender"
        label="性别"
        placeholder="点击选择性别"
        @click="showPicker2 = true" required
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="education"
        label="学历"
        placeholder="点击选择学历"
        @click="showPicker = true" required
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field v-model="occupation" label="职业" required></van-field>
      <van-field
        readonly
        clickable
        name="picker"
        :value="readBefore"
        label="之前是否阅读过放射报告?"
        placeholder="点击选择频率"
        @click="showPicker1 = true" required
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-button type="primary" @click="goToPage2">下一页</van-button>
    </van-form>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Course',
  data () {
    return {
      age: '',
      gender: '',
      education: '',
      occupation: '',
      readBefore: '',
      columns: ['小学以下', '小学', '初中', '高中', '中专', '大专', '本科', '硕士', '博士'],
      showPicker: false,
      columns1: ['从未', '仅一次', '几次', '频繁'],
      showPicker1: false,
      columns2: ['男', '女'],
      showPicker2: false
    }
  },
  methods: {
    onConfirm (value) {
      this.education = value
      this.showPicker = false
    },
    onConfirm1 (value) {
      this.readBefore = value
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.gender = value
      this.showPicker2 = false
    },
    goToPage2 () {
      if (!this.age || !this.gender || !this.education || !this.occupation) {
        this.$toast.fail('请填写所有必填项')
        return
      }
      // 通过路由的 query 参数将数据传递给第二页
      this.$router.push({
        name: 'report', // 请将'Page2RouteName'替换为实际路由名称
        query: {
          age: this.age,
          gender: this.gender,
          education: this.education,
          occupation: this.occupation,
          readBefore: this.readBefore
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
}

.my-swipe .van-swipe-item {
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.my-swipe img {
  height: 170px;
  margin: 0 auto;
}

// 底部课程列表的位置样式，不应该设置在组件内容
.course-content-list {
  top: 220px;
  bottom: 50px;
}
</style>
